<template>
    <div>
        <div>
            <el-dialog class="nyDialog" :visible.sync="is_dialog_show" width="42%" :close-on-click-modal="false"
                :before-close="() => { this.close(); }" top="5vh">
                <div class="overflow-hidden w-full h-full flex flex-col items-center" style="border-radius:4px;">
                    <div class="w-full h-w48 flex items-center px-w20 justify-between bg-caux text-white">
                        <div class="text-f14">{{ s_assess.m_assess.id ? '修改测评量表' : '添加测评量表' }}</div>
                        <i class="el-icon-circle-close   cursor-pointer" @click.stop="close()"></i>
                    </div>
                    <div class="overflow-y-auto h-w580 w-full flex justify-center">
                        <div class="flex flex-col w-w8/12  ">
                            <div class="flex flex-row items-center  w-full h-w50 leading-w50 text-c3 text-f16  mt-w30">
                                <div class=" w-w1/4 text-right pr-w20">量表名称：</div>
                                <el-input class="w-w3/4" placeholder="请输入内容" v-model="s_assess.m_assess.name" clearable>
                                </el-input>
                            </div>
                            <div class="flex flex-row items-center  w-full h-w50 leading-w50 text-c3 text-f16  mt-w30">
                                <div class=" w-w1/4 text-right pr-w20">英文名称：</div>
                                <el-input class="w-w3/4" placeholder="请输入内容" v-model="s_assess.m_assess.english"
                                    clearable>
                                </el-input>
                            </div>
                            <div class="flex flex-row items-start  w-full   text-c3 text-f16  mt-w30">
                                <div class=" w-w1/4 text-right pr-w20">量表封面</div>
                                <div class="flex flex-col">
                                    <el-upload class="avatar-uploader" action="" :show-file-list="false"
                                        :on-change="action_select_file" :auto-upload="false"
                                        accept="image/png, image/jpeg">
                                        <img v-if="s_assess.m_assess.logo" :src="s_assess.m_assess.logo" class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div class=" mt-w5 text-f15 text-c6">图片尺寸：828px*438px</div>
                                </div>
                            </div>
                            <div class="flex flex-row items-start  w-full   text-c3 text-f16  mt-w30">
                                <div class=" w-w1/4 text-right pr-w20">列表封面</div>
                                <div class="flex flex-col">
                                    <el-upload class="avatar-uploader" action="" :show-file-list="false"
                                        :on-change="action_select_file_list" :auto-upload="false"
                                        accept="image/png, image/jpeg">
                                        <img v-if="s_assess.m_assess.listLogo" :src="s_assess.m_assess.listLogo"
                                            class="avatar">
                                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                    </el-upload>
                                    <div class=" mt-w5 text-f15 text-c6">图片尺寸：198px*186px</div>
                                </div>
                            </div>
                            <div class="flex flex-row items-center  w-full h-w50 leading-w50 text-c3 text-f16  mt-w30">
                                <div class=" w-w1/4 text-right pr-w20">选项类型：</div>
                                <el-radio-group class="w-w3/4" v-model="s_assess.m_assess.option">
                                    <el-radio :label="1">数字（1、）</el-radio>
                                    <el-radio :label="2">字母（A、）</el-radio>
                                </el-radio-group>
                            </div>
                            <div class="flex flex-row items-start  w-full  text-c3 text-f16  mt-w30">
                                <div class=" w-w1/4 text-right pr-w20">量表介绍：</div>
                                <el-input type="textarea" :rows="5" class="w-w3/4" placeholder="请输入内容"
                                    v-model="s_assess.m_assess.introduce">
                                </el-input>
                            </div>
                            <div class="flex flex-row items-start  w-full  text-c3 text-f16  mt-w30">
                                <div class=" w-w1/4 text-right pr-w20">量表描述：</div>
                                <el-input type="textarea" :rows="2" class="w-w3/4" placeholder="请输入内容"
                                    v-model="s_assess.m_assess.guide">
                                </el-input>
                            </div>
                            <div class="flex flex-row items-start  w-full  text-c3 text-f16  mt-w30">
                                <div class=" w-w1/4 text-right pr-w20">报告描述：</div>
                                <UIEditor :data="s_assess.m_assess.reportDes" @editor_change="action_editor_change"
                                    class="w-w3/4 h-w200 overflow-y-auto">
                                </UIEditor>
                            </div>
                        </div>
                    </div>
                    <div class="w-full flex flex-row justify-center mt-w30 mb-w30">
                        <el-button class=" w-w1/5 mr-w20" @click="close">取消</el-button>
                        <el-button class=" w-w1/5 bg-cmain_hover" type="primary" @click="actionSubmit">确定</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
<script lang="ts">
import nyMessageToast from "@/utils/NYMessageToast";
import DZModelAssess from "@/views/测评管理/model/DZModelAssess";
import DZServiceAssess from "@/views/测评管理/service/DZServiceAssess";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import UIEditor from "@/components/ui-editor/UIEditor.vue"
import UITinymceEditor from "@/components/ui-editor/UITinymceEditor.vue"
@Component({
    components: { UIEditor, UITinymceEditor }
})
export default class UiDialogAddAssess extends Vue {

    @Prop() is_showDialog;

    @Prop() data;

    is_dialog_show = false;

    s_assess = new DZServiceAssess();


    created() { }

    mounted() {
    }

    beforeDestroy() { }

    close() {
        this.$emit('nydialog_closed', '');
        this.initDialog();
    }
    initDialog() {
        this.s_assess.m_assess = new DZModelAssess();
        this.is_dialog_show = false;
    }

    @Watch("is_showDialog")
    watchShowDialog(value: any, oldValue: string) {
        this.is_dialog_show = value;
    }
    @Watch("data")
    watchData(value: any, oldValue: string) {
        if (value) {
            this.s_assess.m_assess = value;
        } else {
            this.s_assess.m_assess = new DZModelAssess();
        }
    }

    action_select_file(file) {
        if (file.status == "ready") {
            this.s_assess.m_assess.logo = URL.createObjectURL(file.raw);
            this.s_assess.net_upload_image(file.raw);
        }
    }

    action_select_file_list(file) {
        if (file.status == "ready") {
            this.s_assess.m_assess.listLogo = URL.createObjectURL(file.raw);
            this.s_assess.net_upload_list_image(file.raw);
        }
    }

    actionSubmit() {
        if (this.s_assess.m_assess.name.nyIsEmpty()) {
            nyMessageToast.warning("请输入量表名称");
            return;
        }
        if (this.s_assess.m_assess.logo.nyIsEmpty()) {
            nyMessageToast.warning("请上传量表封面");
            return;
        }
        if (this.s_assess.m_assess.introduce.nyIsEmpty()) {
            nyMessageToast.warning("请输入量表介绍");
            return;
        }
        if (this.s_assess.m_assess.reportDes.nyIsEmpty()) {
            nyMessageToast.warning("请输入报告描述");
            return;
        }
        this.$emit('nydialog_submit', this.s_assess.m_assess.id != '', this.s_assess.m_assess);
        this.initDialog();
    }

    action_editor_change(text) {
        this.s_assess.m_assess.reportDes = text;
    }

}
</script>
<style lang="less" scoped>
/deep/ .el-dialog {
    border-radius: 4px !important;
    border: none;
}

/deep/.el-dialog__body {
    text-align: left;
    // height: 48vw;
    padding: 0px;
}


/deep/ .el-dialog__footer {
    text-align: right;
}

/deep/.el-dialog__header {
    height: 0px;
    padding: 0;
}

/deep/ .el-icon-close:before {
    content: '';
}

.nyDialog {
    background: none;
}

/deep/ .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

/deep/ .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 233px;
    height: 110px;
    line-height: 110px;
    text-align: center;
}

/deep/ .avatar {
    width: 233px;
    height: 110px;
    display: block;
}
</style>
